<template>
	<u-popup v-if="_show" class="card-popup" bgColor="transparent" :show="_show" mode="center" @close="close()" @open="open()">
		<view class="poster-box fboxWrap Ycenter Xcenter">
			<view class="card-modal">
				<view class="close fboxCol Ycenter Xcenter" @click="close()">
					<u-icon name="close" color="#ffffff" size="14"></u-icon>
				</view>
				<swiper ref="swiper" id="swiper-wrap" class="swiper bg-base" circular :current="active" :indicator-dots="false"
					:autoplay="false" :interval="2000" :duration="500" @change="swiperChange">
					<swiper-item v-if="innerData.dataHumanSucceedImage">
						<view class="card" id="dataHuman">
							<view class="hd bg-base">
								<img class="video-img" :src="innerData.dataHumanSucceedImage" mode="aspectFill" />
								<img class="pic" :src="videoBg" mode="widthFix" />
								<view class="name fboxCol Ycenter Xcenter font28 font-weight color-0F0400">
									{{innerData.realName}}
								</view>
							</view>
							<view class="bd fboxRow bg-base">
								<img class="avatar" :src="innerData.avatar || innerData.imagePhoto" mode="aspectFill" />
								<view class="fboxCol Xcenter font24 flex1">
									<view class="name font36 font-weight color-0F0400">{{innerData.realName}}</view>
									<view class="mt20 font20 color-969699">
										{{innerData.firstCompanyName || innerData.industry }}
									</view>
									<view class="mt10 font20" style="color:#666564">
										{{innerData.firstPositionName || '自由职位'}}
									</view>
								</view>
								<view class="code fboxCol Ycenter Xcenter">
									<img class="qrcode" :src="innerData.codeUrl" mode="" />
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item v-for="(item, index) in innerData.posterBackgroundUrl" :key="index">
						<view class="card" :id="'dataHuman'+index">
							<view class="hd bg-base">
								<img class="pic" :src="item" mode="" />
							</view>
							<view class="bd fboxRow Yend bg-base">
								<img class="avatar" :src="innerData.avatar || innerData.imagePhoto" mode="aspectFill" />
								<view class="fboxCol Xcenter font24 flex1">
									<view class="name font36 font-weight color-0F0400">{{innerData.realName}}</view>
									<view class="mt20 font20 color-969699">
										{{innerData.firstCompanyName || innerData.industry }}
									</view>
									<view class="mt10 font20" style="color:#666564">
										{{innerData.firstPositionName || '自由职位'}}
									</view>
								</view>
								<view class="code fboxCol Ycenter Xcenter">
									<img class="qrcode" :src="innerData.codeUrl" mode="" />
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="canvas-fixed" id="canvas-fixed">
					<canvas id="firstCanvas" style="width: 530px;height: 944px;" class="firstCanvas" canvas-id="firstCanvas"></canvas>
				</view>
				<view class="indicator-dots fboxRow Ycenter Xcenter" >
					<template v-if="innerData.dataHumanSucceedImage">
						<view class="dot" v-for="(item, index) in (innerData.posterBackgroundUrl.length+1)" :key="index"
							:class="{active: index==active}"></view>
					</template>
					<template v-else>
						<view class="dot" v-for="(item, index) in (innerData.posterBackgroundUrl && innerData.posterBackgroundUrl.length)" :key="index"
						:class="{active: index==active}"></view>
					</template>
				</view>
				<view class="action-bottom fboxRow Ycenter color-FFF font24">
					<view class="flex1 fboxCol Ycenter">
						<view class="icon fboxCol Ycenter Xcenter" @click="downloadPic">
							<u-icon name="download" color="#ffffff" size="22"></u-icon>
						</view>
						<view class="tit mt10">下载</view>
					</view>
					<!--  #ifdef  H5 -->
					<view class="flex1 fboxCol Ycenter">
						<view class="icon fboxCol Ycenter Xcenter" @click="shareCard">
							<u-icon name="share-square" color="#ffffff" size="22"></u-icon>
						</view>
						<view class="tit mt10">分享</view>
					</view>
					<!--  #endif -->
					<!--  #ifdef  MP -->
					<view class="flex1 fboxCol Ycenter">
						<button class="icon fboxCol Ycenter Xcenter" open-type="share">
							<u-icon name="share-square" color="#ffffff" size="22"></u-icon>
						</button>
						<view class="tit mt10">分享</view>
					</view>
					<!--  #endif -->
				</view>
				<!-- <view class="fboxRow Ycenter Xcenter color-FFF font20">{{version}}</view> -->
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		digitalPersonInfo,
		Base64toUrl
	} from '@/api/index.js';
	import {CanvasMixins} from './canvas.mixins.js';
	export default {
		mixins: [CanvasMixins],
		props: {
			show: {
				type: Boolean,
				default: true
			},
			innerData: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				active: 0,
				code: '',
				tempFilePath: '',
				videoBg: 'https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/video-bg.png',
				// innerData: {},
				version: '1.3',
				sys: {},
				isBrowser: false
			};
		},
		computed: {
			_show: {
				get() {
					return this.show
				},
				set(val) {
					this.$emit('update:show', val)
				}
			}
		},
		mounted() {
			this.sys = uni.getSystemInfoSync()
		},
		methods: {
			swiperChange(e) {
				this.active = e.detail.current
			},
			open() {
				// console.log('open');
			},
			close() {
				this._show = false
				// console.log('close');
			},
			// 分享名片
			shareCard() {
				// #ifdef H5
				uni.setClipboardData({
					data: window.location.href,
					showToast: false,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '分享地址已复制，去分享给朋友吧'
						})
						console.log('success');
					}
				});
				// #endif
				// #ifdef MP
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider)
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log(JSON.stringify(loginRes));
								}
							});
						}
					}
				});
				// #endif
			},

			async getPic() {
				try {
				// #ifdef H5
					this.$nextTick(()=>{
						this.htmlSave()
					})
				// #endif
				// #ifdef MP
					this.$nextTick(()=>{
						this.wxSave(this.innerData)
					})
				// #endif					
				} catch (e) {
					// error
					console.log(e)
					uni.hideLoading()
				}
			},
			downloadPic() {
				this.getPic()
				// if (this.sys.ua.indexOf('WeChat') != -1) { //判断是微信
				// 	this.isBrowser = true
				// } else {
				// 	this.getPic()
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.card-popup /deep/ .u-popup__content {
		background: none;
	}

	.card-modal {
		position: relative;
		width: 530rpx;
		/* height: 1090rpx; */
		/* padding-bottom: 100rpx; */
	}

	// .canvas-fixed {
	// 	position: fixed;
	// 	top: 100rpx;
	// 	left: 30rpx;
	// 	width: 530rpx;
	// 	height: 944rpx;
	// 	background-color:red
	// }
	.canvas-fixed {
		position: fixed;
		top: -1000px;
		left: -1000px;
		width: 530rpx;
		height: 944rpx;
		background-color:red
	}

	.card {
		width: 530rpx;
		height: 756rpx;
	}

	.canvas-box {
		width: 530rpx;
		height: 944rpx;
	}

	.swiper {
		width: 530rpx;
		height: 944rpx;
		z-index: 2;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
	}

	.card-modal .close {
		position: absolute;
		right: -20rpx;
		top: -20rpx;
		z-index: 3;
	}

	.indicator-dots {
		margin-top: 30rpx;
	}

	.indicator-dots .dot {
		margin: 0 6rpx;
		width: 12rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, .4);
		border-radius: 50%;
	}

	.indicator-dots .dot.active {
		background: #fff;
	}

	.hd {
		position: relative;
		width: 530rpx;
		height: 756rpx;
	}

	.hd .name {
		position: absolute;
		left: 47rpx;
		top: 530rpx;
		z-index: 4;
		color: #720800;
		text-align: center;
		line-height: 40rpx;
		width: 40rpx;
		height: 160rpx;
		overflow: hidden;
	}

	.video-img {
		position: absolute;
		left: -132rpx;
		top: 0;
		z-index: 1;
		width: 796rpx;
		height: 530rpx;
	}

	.pic {
		width: 100%;
		min-width: 530rpx;
		height: 756rpx;
		position: relative;
		z-index: 2;
	}

	.close {
		width: 44rpx;
		height: 44rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
	}

	.avatar {
		margin-right: 20rpx;
		width: 116rpx;
		height: 116rpx;
		border-radius: 12rpx;
	}

	.bd {
		padding: 36rpx 30rpx;
	}

	.industry {
		margin-bottom: 12rpx;
	}

	.card-popup /deep/ .u-popup__content {
		background: none;
	}

	.qrcode {
		width: 80rpx;
		height: 80rpx;
	}

	.code .tit {
		margin-top: 8rpx;
	}

	.action-bottom {
		margin-top: 40rpx;
	}

	.action-bottom .icon {
		width: 68rpx;
		height: 68rpx;
		background: rgba(255, 255, 255, .3);
		border-radius: 50%;
	}
</style>
